<template>
  <el-card body-style="width: 100%;height: 90%;" style="width: 100%; height: 100%">
    <template #header>
      <div class="header-title">
        <b>计量网络图</b>
        <MeterSelect ref="selectRef" @meters-loaded="handleMetersLoaded"></MeterSelect>
      </div>
    </template>
    <StructureLayout @refresh="handleRefresh" v-loading="loading" :meterList="meterList" :treeData="treeData">
    </StructureLayout>
  </el-card>
</template>
<script setup>
import StructureLayout from "./components/StructureLayout.vue";
import { ref } from "vue";
import MeterSelect from "@/components/meter/MeterSelect.vue";
import convertToTreeData from "@/utils/convertToTreeData";
import { handleError } from "@/utils/handleError"; // 导入错误处理函数
let loading = ref(false);
const meterList = ref([]);
const treeData = ref([]);
const selectRef = ref(null);
function handleRefresh() {
  selectRef.value.refresh(); // 调用子组件的 refresh 方法
}
// 处理表计列表加载完成事件
const handleMetersLoaded = async (meters) => {
  loading.value = true;
  try {
    // 保存接收到的表计列表
    meterList.value = meters;
    // 转换为树形结构数据
    treeData.value = await convertToTreeData(meterList.value);
  } catch (error) {
    handleError(error, '加载数据失败');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.header-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>